<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="500px"
      append-to-body
      :before-close="close"
    >
      <el-descriptions :column="2">
        <el-descriptions-item label="状态">
          <dict-tag :options="dict.type.pay_state" :value="form.payState"/>
        </el-descriptions-item>
        <el-descriptions-item label="账单类型">{{ billTypeText(form.billType) }}</el-descriptions-item>
        <el-descriptions-item label="房间">{{ form.premisesAddress }}</el-descriptions-item>
        <el-descriptions-item label="业主">{{ form.userName }}</el-descriptions-item>
        <el-descriptions-item label="费用">{{ form.cost }}</el-descriptions-item>
        <el-descriptions-item label="最晚付款日期">
          {{ $moment(form.latestPayTime).format('YYYY-MM-DD') }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式" v-if="form.payMethod">{{ payMethodText(form.payMethod) }}</el-descriptions-item>
        <el-descriptions-item label="支付时间" v-if="form.payMethod == 1&&form.payTime">
          {{ $moment(form.payTime).format('YYYY-MM-DD HH:mm:ss ') }}
        </el-descriptions-item>
        <el-descriptions-item label="处理凭证" v-if="form.payMethod == 2">
          <!--          <el-button type="text" size="mini" @click="handleVoucherDetail">查看详情</el-button>-->
          <el-tag size="small" style="cursor: pointer;" @click="handleVoucherDetail">查看详情</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 支付凭证详情弹窗 -->
    <PayVoucher v-model="voucherVisible" :data="form" />
  </div>
</template>

<script>
import PayVoucher from '@/views/long-short-rent/bill/proprietor/components/pay-voucher.vue'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '账单详情'
    },
    data: {
      default: () => ({})
    }
  },
  components: {
    PayVoucher
  },
  dicts: ['pay_state'],
  data() {
    return {
      // 表单参数
      form: {
        itemId: undefined, // 项目id
        payVoucherList: [] // 支付凭证列表
      },
      voucherVisible: false
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val) // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    },
    //账单类型文本
    billTypeText() {
      return (value) => {
        let obj = [{ value: 1, label: '一次性服务费' }].find(item => item.value == value)
        return obj ? obj.label : ''
      }
    },
    payMethodText() {
      return (value) => {
        let obj = [{ value: 1, label: '线上支付' }, { value: 2, label: '线下处理' }].find(item => item.value == value)
        return obj ? obj.label : ''
      }
    },
    paymentVoucherList() {
      return this.data.payVoucher ? this.data.payVoucher.split(',') : []
      return this.form.payVoucherList.map(item => ({ url: item }))
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
    },
    //重置表单
    reset() {
      this.form = {
        itemId: undefined, // 项目id
        name: ''//名称
      }
      this.resetForm('form')
      if (this.data.proprietorBillId) {
        this.form = this.data

        this.form.payVoucherList = this.data.payVoucher ? this.data.payVoucher.split(',') : []
      }
    },
    handleVoucherDetail() {
      this.voucherVisible = true
    },
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

.voucher {
  display: grid;
  grid-template-columns:repeat(1, 1fr);
  grid-gap: 5px;
}

</style>
